<HTML>
	<HEAD>
		<TITLE>Tree view with drag-n-drop</TITLE>
	<STYLE>
  
    #dd 
    {
      background-image:none;
      background-color:window;
      border:1px solid threedshadow;
      width:25%; 
      height:*;
    }
  
    #dd,        
    #dd options // containers
    {
      accept-drop: selector(#dd option,#dd options);
      drop:append;
      background-color:window;
    }
    
    #dd:drag-over, 
    #dd options:drag-over // dragged over container state
    {
      background:yellow; // current target highlightion
    }
    
    #dd option,
    #dd options
    {
      draggable:only-move; // we support only reordering here
    }
    #dd option:moving,
    #dd options:moving
    {
      opacity:0.5;
    }
    
    #dd option:drag-source,
    #dd options:drag-source
    {
      color:graytext;
    }

    /* tree line support */
    
    #dd options:has-children > * // all options with more than one child (that is caption)
    {
      display: list-item;
      list-style-type: tree-line;
      outline-color:red;
    }
    
    #dd options > *:first-child // caption of the options element
    {
      font-weight:bold;
    }
    
    #dd options 
    {
      padding-left:16px;
    }
    
    #dd options >:first-child
    {
      margin-left:0;
    } 
    
    widget#dd option:nth-child(odd)
    {
      context-menu: selector(menu#option-odd); /* selector of context menu element */
    }
    widget#dd option:nth-child(even)
    {
      context-menu: selector(menu#option-even);
    }
    
    menu#option-odd
    {
      width:max-intrinsic;
      background-color: beige;
    }
    menu#option-even
    {
      width:max-intrinsic;
      background-color: lavender;
    }

    widget#dd options > :first-child /* caption of options group */
    {
      context-menu: selector(menu#options);
    }
    menu#options
    {
      width:max-intrinsic;
      background-color: orange;
    }
   
    
	</STYLE>
	</HEAD>
	<BODY>
	<h1>Tree view with drag-n-drop and context menu for items</h1>
  <widget #dd type="select">
    <OPTIONS expanded>Metals
      <OPTIONS expanded>Alkaline Metals
        <OPTION>Lithium (Li)</OPTION>
        <OPTION>Sodium (Na)</OPTION>
        <OPTION>Potassium (K)</OPTION>
      </OPTIONS>
      <OPTIONS expanded>Transition Metals
        <OPTION>Scandium (Sc)</OPTION>
        <OPTION>Titanium (Ti)</OPTION>
        <OPTION>Vanadium (V)</OPTION>
      </OPTIONS>
    </OPTIONS>
    <OPTIONS expanded>Halogens
        <OPTION>Fluorine (F)</OPTION>
        <OPTION>Chlorine (Cl)</OPTION>
        <OPTION>Bromine (Br)</OPTION>
    </OPTIONS>
    <OPTIONS>Empty group</OPTIONS>
  </widget>

<popup> <!-- I've enclosed it popup just for grouping reasons. -->
  <menu.context id="option-odd">
    <caption>Odd option operations</caption>
    <li id="i1">First item</li>
    <li id="i2">Second item</li>
    <li id="i3">Third item</li>
    <li id="i4">Fourth item</li>
  </menu>
  
  <menu.context id="option-even">
    <caption>Even option operations</caption>
    <li id="ie1">First item</li>
    <li id="ie2">Second item</li>
    <li id="ie3">Third item</li>
  </menu>
  
  <menu.context id="options">
    <caption>Option group operations</caption>
    <li id="ogi1">First item</li>
    <li id="ogi2">Second item</li>
    <li id="ogi3">Third item</li>
  </menu>
 
  
</popup>
  
  
	</BODY>
</HTML>
